<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Save Store</title>
</head>
<body>
<form   name="frm" id="frm" onsubmit="return onSubmit()" method="post">
  <input name="storeName" id=storeName placeholder="Store Name" size="100"/></br>
  <input name="address" id="address"  placeholder="Address" size="80"/></br>
  <input name="city" id="city" placeholder="City"  size="40"/>&nbsp;
  <input name="state" id="state"  value="MI"  size="2"/></br>
  <input name="zip" id="zip"  placeholder="Zip code"  size="10"/></br>
  <input name="lat" id="lat" placeholder="Latitude"/>
  &nbsp;&nbsp;&nbsp;
  <input name="lng" id="lng" placeholder="Longtitude"/>
   &nbsp;&nbsp;&nbsp;
   <input type="button" value="Geocode" onclick="codeAddress()">
  </br>
  <input name="phone" id="phone"  placeholder="Phone"  size="20"/></br>
  <input name="email" id="email"  placeholder="Email"  size="50"/></br>
  <input name="website" id="website"  placeholder="Website"  size="100"/></br>
  <input name="twitter" id="twitter"  placeholder="Twitter"  size="100"/></br>
  <input name="facebook" id="facebook"  placeholder="Facebook"  size="100"/></br>
  <input name="searchterm" id="searchterm"  placeholder="Search Term"  size="100"/></br>
   <input name="rank" id="rank"  value="3"placeholder="Rank 1-4"  size="5"/></br>
   
   Tags: 
   <select name="tag"  id="tag">
   
   </select><br/>
   Include Filter: <input name="include1" id="include1" size="10"/>&nbsp;&nbsp;<input name="include2" id="include2" size="10"/><br/>
   Human test <span name="keyfield" id="keyfield"></span>
   <input name="keytest" id="keytest" />
   </br>
  <input type="submit" value="submit" class="submit"  />
  <input type="reset" value="reset" />
</form>

 <!-- the result of the search will be rendered inside this div -->
  <div id="result">Current</div>
  
</body>
<script src="js/jquery-1.4.2.js" ></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
var geocoder;
$(document).ready(function(){
	
	  console.log("Hello JQuery");
	  geocoder = new google.maps.Geocoder();
	  $.ajax({
	      url: "getTagList.php",
	      context: document.body,
	      success: function( json ) {
	          //$( "#result" ).empty().append( json );
	          
	          var ar = eval(json);
	          for(var i=0;i<ar.length;i++){
	            var opt = document.createElement('option');
	            opt.text = ar[i].tag;
	            opt.value = ar[i].tagId;
	            try {
	              document.getElementById('tag').add(opt, null); // standards compliant; doesn't work in IE
	            } catch(ex) {
	              document.getElementById('tag')(opt); // IE only
	            }
	           
	          }
	        
	        }
	    });
	  
	  $.ajax({
	        url: "getKey.php",
	        context: document.body,
	        success: function( json ) {
	            //$( "#result" ).empty().append( json );
	            
	          $("#keyfield").html( json );
	          //$( "#result" ).empty().append( json );
	          
	          }
	      });
	  
	  
	  
	});


function onSubmit() {
	  
	  console.log("Hello Form Post");
	  var $inputs = $('#myForm :input');
	  var values = {};
	    $inputs.each(function() {
	        values[this.name] = $(this).val();
	    });
	  $.ajax({
	      type: "POST",
	      url: "SaveStore.php",
	      data: {
	        storeName: $(storeName).val(), 
	        address: $(address).val(),
	        city: $(city).val(),
	        state: $(state).val(),
	        zip: $(zip).val(),
	        lat: $(lat).val(),
	        lng: $(lng).val(),
	        phone: $(phone).val(),
	        email: $(email).val(),
	        website: $(website).val(),
	        facebook: $(facebook).val(),
	        twitter: $(twitter).val(),
	        searchterm: $(searchterm).val(),
	        rank: $(rank).val(),
	        tagId: $(tag).val(),
	        include1: $(include1).val(),
	        include2: $(include2).val(),
	        keytest: $(keytest).val(),
	      },
	      success: function( json ) {
	        console.log(json);
	           $( "#result" ).empty().append( json );
	           $('#frm')[0].reset();
	            }
	  });
	  return false;
	  
	}
	
function codeAddress() {

    var address = document.getElementById("address").value +  " " + document.getElementById("city").value + " MI." + document.getElementById("zip").value;

    geocoder.geocode( { 'address': address}, function(results, status) {

      if (status == google.maps.GeocoderStatus.OK) {
    	  console.log(results[0].geometry);
        var _lat = results[0].geometry.location.Ua.toString();
        var _lng = results[0].geometry.location.Va.toString();
        if(_lat.length > 10)
        	_lat = _lat.substring(0, 9);
        
        if(_lng.length > 10)
        	_lng = _lng.substring(0, 9);
        
        document.getElementById('lat').value=_lat;
        document.getElementById('lng').value=_lng;
        console.log(results[0].geometry);

       

      } else {

        alert("Geocode was not successful for the following reason: " + status);

      }

    });
}
</script> 

</html>